<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Contact Us</title>
    <style>
    	body {
			margin: 0px;
			padding: 0px;
			text-align: justify;
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 13px;
			color: #333333;
		}
		.error {
			color:#F00;
			font-weight:bold;
		}
    </style>
    <script language="javascript" src="js/prototype.js"></script>    
	<script language="javascript">
	function validForm() {
		// First reset all errors in case of re-validation	
		$('name_err').hide();
		$('email_err').hide();
		$('email_format_err').hide();
		$('msg_err').hide();
		$('error').hide();
		
		// now validate!
		var error = false;
		var name = $('name').getValue();
		if(	name.empty() ) {
			$('name_err').show();
			error = true;
		}
		var email = $('email').getValue();
		if( email.empty() ) {
			$('email_err').show();
			error = true;
		} 
		// Validate whether email is valid:
		var emailPattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$/;  
		if(!email.empty() && !emailPattern.test(email)) {
			$('email_format_err').show();
			error = true;
		}
		
		var msg = $('msg').getValue();
		if( msg.empty() ) {
			$('msg_err').show();
			error = true;
		}
		if (error) {
			$('error').show();
			return false;
		} else {
			return true;
		}
	}
	function init() {		
		Event.observe('contactForm', 'submit', function(event) {
			if( !validForm()) {
				Event.stop(event);
				return;
			}
			$('contactForm').request({								 
				method: 'post', 
		//        onFailure: function() { .... },
				onSuccess: function(t) {
					var name = $('name').getValue();
					$('formdiv').update("<p>Uw vraag is verzonden, " + name + ".  U krijgt spoedig een antwoord.</p>");
				}
			});
			Event.stop(event); // stop the form from submitting
		});
	}
	</script>
    
  </head>

  <body onload="init();">
  <div id="formdiv">
	<p>Gelieve uw gegevens in te vullen en wij contacteren u zo spoedig mogelijk weer.</p>
	<form id="contactForm" action="http://svc.ducbase.com/contactus">
	  Naam: <input id="name" name="name" type="text" value="" /><span id="name_err" class="error" style="display:none;">*</span><br />
      Email: <input id="email" name="email" type="text" /><span id="email_err" class="error" style="display:none;">*</span><span id="email_format_err" class="error" style="display:none;">Ongeldig email address</span><br />
      <br />
      Stel uw vraag hier:  <span id="msg_err" class="error" style="display:none;">*</span><br />
      <textarea id="msg" name="msg" cols="55" rows="10"></textarea><br />
      <input name="submit" type="submit" value="Verzenden" /><span id="error" class="error" style="display:none;"> Gelieve alle velden in te vullen.</span>
    </form>
    </div>
  </body>
</html>
